<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>底部</title>
		<link href="./css/mui.min.css" rel="stylesheet" />
		<style>
			.mui-bar-tab .mui-tab-item{
				color: #808080;
			}
			.mui-bar-tab .mui-tab-item.mui-active{
				color: black;
				
			}
			
		</style>
	</head>
	<body>
	    <div class="mui-content"> 
	        <nav class="mui-bar mui-bar-tab">
	            <a class="mui-tab-item" href="drinkshop.html"> 
	                <span class="mui-icon">
	                	<img id="a11" src="./imgs/mainTab/drop1.png" style="width: 24px;height: 24px;">
	                </span> 
	                <span class="mui-tab-label">饮品店</span> 
	            </a> 
	            <a class="mui-tab-item mui-active" href="views/home/home.html"> 
	                <span class="mui-icon">
	                	<img id="b11" src="./imgs/mainTab/index2.png" style="width: 24px;height: 24px;">
	                </span> 
	                <span class="mui-tab-label">首页</span> 
	            </a> 
	            <a class="mui-tab-item" href="freedom.html"> 
	                <span class="mui-icon">
	                	<img id="c11" src="./imgs/mainTab/freedom1.png" style="width: 24px;height: 24px;">
	                </span> 
	                <span class="mui-tab-label">抽奖</span> 
	            </a> 
	        </nav> 
	    </div> 
	</body>
	<script src="./js/mui.min.js"></script>
	<script type="text/javascript" src="./js/jquery.min.js" ></script>
	<script type="text/javascript"> 
        var menu = null; 
        var main = null; 
        var showMenu = false; 
        mui.init(); 
        var subpages = ['views/home/home.html', 'drinkshop.html', 'freedom.html']; 
	    var subpages_style = { 
	        top: '0px', 
	        bottom: '51px' 
	        }; 
	        var anishow = {}; 
	 
	        //创建子页面 
	    mui.plusReady(function() { 
//	    	localStorage.removeItem('$locations');
	        var self = plus.webview.currentWebview(); 
	        for(var i = 0; i < subpages.length; i++) { 
	            var temp = {}; 
	            var sub = plus.webview.create(subpages[i], subpages[i], subpages_style); 
	            if(i > 0) { 
	                sub.hide(); 
	            } else { 
	                temp[subpages[i]] = 'true'; 
	                mui.extend(anishow, temp); 
	            } 
	            self.append(sub); 
	        } 
	         
	        plus.screen.lockOrientation("portrait-primary");  //锁定竖屏正方向 
	        main = plus.webview.currentWebview(); 
	        main.addEventListener('maskClick',closeMenu); 
	        //处理侧滑 
	        setTimeout(function(){ 
	            menu = mui.preload({ 
	                id:'menu', 
	                url:'menu.html', 
	                styles:{ 
	                    left:0, 
	                    width:'80%', 
	                    zindx:-1, 
	                    bounce:'vertical' 
	                }, 
	                show:{ 
	                    duration:1000 
	                } 
	            }) 
	        },200) 
	         
	         
	    }); 
	    //当前激活项 
	    var activeTab = subpages[0]; 
//	    var title = document.getElementById("title"); 
	 
        mui('.mui-bar-tab').on('tap', 'a', function(e) { 
	        var targetTab = this.getAttribute('href'); 
	        if(targetTab == activeTab) { 
	            return; 
	        } else { 
	            //更换标题 
//	            title.innerHTML = this.querySelector('.mui-tab-label').innerHTML; 
	            if(mui.os.ios || anishow[targetTab]) { 
	                plus.webview.show(targetTab); 
	            } else { 
	                var temp = {}; 
	                temp[targetTab] = 'true'; 
	                mui.extend(anishow, temp); 
	                plus.webview.show(targetTab, 'fade-in', '300'); 
	            } 
	            plus.webview.hide(activeTab); 
	            activeTab = targetTab; 
	            //图标
	            if(targetTab=='drinkshop.html'){
	            	document.getElementById("a11").src = "./imgs/mainTab/drop2.png"
	            	document.getElementById("b11").src = "./imgs/mainTab/index1.png"
	            	document.getElementById("c11").src = "./imgs/mainTab/freedom1.png"
	            }else if(targetTab=='index.html'){
	            	document.getElementById("a11").src = "./imgs/mainTab/drop1.png"
	            	document.getElementById("b11").src = "./imgs/mainTab/index2.png"
	            	document.getElementById("c11").src = "./img/mainTab/freedom1.png"
	            }else{
	            	document.getElementById("a11").src = "./imgs/mainTab/drop1.png"
	            	document.getElementById("b11").src = "./imgs/mainTab/index1.png"
	            	document.getElementById("c11").src = "./imgs/mainTab/freedom2.png"
	            }
	        } 
	    }) 
	    var isInTranstion = false; 
	    /** 
	     *  显示侧滑菜单  
	     */ 
	    function openMenu(){ 
	        if (isInTranstion) { 
	            return; 
	        }  
	        if (!showMenu) { 
	            isInTranstion =true; 
	            menu.setStyle({ 
	                mask:'rgba(0,0,0,0)', 
	            }); 
	        } 
	        menu.show('none',0,function(){ 
	            main.setStyle({ 
	                mask:'rgba(0,0,0,0.4)', 
	                left:'80%', 
	                transition:{ 
	                    duration:300 
	                } 
	            }); 
	            mui.later(function(){ 
	                isInTranstion = false; 
	                menu.setStyle({ 
	                    mask:'none' 
	                }) 
	            },160) 
	            showMenu = true; 
	        }) 
	    } 
	    /** 
	     *关闭侧滑菜单  业务  
	     */ 
	    function _closeMenu(){ 
	        if (isInTranstion) { 
	            return; 
	        }  
	        if (showMenu) { 
	            isInTranstion = true; 
	            main.setStyle({ 
	                mask:'none', 
	                left:'0', 
	                transition:{ 
	                    duration:200 
	                } 
	            }); 
	            showMenu = false; 
	             
	            mui.later(function(){ 
	                isInTranstion = false; 
	                menu.hide(); 
	            },200) 
	        } 
	    } 
	    /** 
	     *关闭菜单  
	     */ 
	    function closeMenu(){ 
	        _closeMenu(); 
	    } 
	    /** 
	     *关闭页面 
	     */
//	    function downMenu(){
//	    	plus.webview.currentWebview().close();
//	    }
	    //侧滑菜单出发关闭打开菜单命令 
	    window.addEventListener('menu:close',closeMenu); 
	    window.addEventListener("menu:open",openMenu); 
//	    window.addEventListener("menu:down",downMenu); 
    </script>

</html>
